<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /*
            接口的文档，每一个接口的请求方式可能都不一样（具体用哪种请求方式需要看接口文档）
                todolist-》get请求请求--不是标准的restful api接口

                get请求- 一般情况获取数据
                    特点-请求参数在 url中，url大小有限制 
                post请求- 一般情况上传数据（发布）
                    参数要放到请求体中


                restful api 接口规范 （一种接口使用的标准）
                    get请求- 一般情况获取数据
                    post请求- 一般情况上传数据
                    delete请求- 一般用于删除数据
                    put/patch - 一般用于修改数据
                   
                    
             一个请求 类似一个
                请求行  url  请求 方式 
                请求头   键值对 ---大部门键值对都是自动设置的
                请求空行  
                请求体    请求的大部分的内容   


        
        */

        /* 
        
    接口功能：创建一条待办事项
    接口地址：http://jx.xuzhixiang.top/ap/api/todos/create.php
    接口请求方式：get--也支持post请求
    接口参数：
         title :标题 （必选参数）
         description: 内容
         type: 类型  0 1 完成状态
        
        */
        let xhr = new XMLHttpRequest()
        let url = 'http://jx.xuzhixiang.top/ap/api/todos/readlist.php'
        xhr.open('post', url);

        //    
        // xhr.send(请求体的数据)
        // xhr.send(请求体的数据)
        // ---- post请求体的参数形式
        // content-type 内容类型--在请求头里面设置--标明请求体里面的数据的内容的类型

        // 1- 表单字符串 搜索字符串 key=value&key2=value2
        // 前端 还得设置 请求头里面的字段 content-type： application/x-www-form-urlencoded

        // 2- json字符串 {"key":"value","key2":"value2"}
        // 前端 还得设置 请求头里面的字段 content-type： application/json

        // 3-  上传图片-文件---表单对象 ---FormData  --js中构造函数创建表单数据    

        // 设置请求头
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')

        // 设置请求体中参数
        xhr.send("pagesize=2&pagenum=1")

        xhr.onload = function () {
            if (xhr.status == 200) {
                let obj = JSON.parse(xhr.responseText);
                console.log(obj);
            }
        }




    </script>

</body>

</html>